<template>
  <div class="app-container">
    <div style="height: 100%" id="scrollView">
      <el-form :inline="true" :model="queryForm"
               align="center"
               style="margin: 20px"
               class="demo-form-inline">
        <el-form-item label="消息标题">
          <el-input v-model="queryForm.searchName" placeholder="输入标题内容"></el-input>
        </el-form-item>
        <el-form-item label="姓名" v-if="username==='admin' || this.username==='ls'">
          <el-input v-model="queryForm.name" placeholder="输入姓名"></el-input>
        </el-form-item>
        <!--        <el-form-item label="状态" v-if="username!=='admin' || this.username!=='ls'">-->
        <!--          <el-select clearable placeholder="请选择" v-model="queryForm.isUserTrue">-->
        <!--            <el-option label="未读" value="1"></el-option>-->
        <!--            <el-option label="已读" value="0"></el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="消息类别">
          <el-select clearable placeholder="请选择" v-model="queryForm.remark">
            <el-option label="系统消息" value="2"></el-option>
            <el-option label="反馈消息" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <p style="display: flex;justify-content: center" v-if="dataList.length ==0 ">
        <el-tag>消息列表空空如也......</el-tag>
      </p>

      <el-card v-else v-for="(item,index) in dataList" :key="item.uuid"
               style="min-height: 120px;background-color: white;position: relative;margin: 5px 0">
        <div class="block" style="float: left;margin-right: 40px">
          <el-avatar style="line-height: 60px;" :size="60">
            <span v-if="item.remark === '2'"> {{ item.name }}</span>
            <span v-else>{{ item.name }}</span>
          </el-avatar>
        </div>
        <div class="block" style="float: left;margin-left: 20px">
          <!--          <p style="margin: 0;font-weight: 600;font-size: 18px;">{{ item.name }}</p>-->
          <p style="margin: 5px 0" v-if="item.remark ==='2'">
            <!--            <el-tag type="danger">{{ item.content }}-->
            <!--            </el-tag>-->
            {{ item.description }}
          </p>
          <p style="margin: 5px 0" v-else>{{ item.description }}</p>
          <el-button v-if="item.remark !=='2'" @click="handleContent(item)" size="mini"
                     style="">查看详情
          </el-button>
          <el-button @click="handleClickShowSystemDialog(item)" v-if="item.remark ==='2'" size="small">查看详情
          </el-button>
          <el-tag
            v-if="item.isUserTrue === 0 && username!='admin' && username!='ls' && item.remark ==='2' "
            type="success"
            style="margin-left: 20px">已读
          </el-tag>
          <el-tag style="margin-left: 20px"
                  v-else-if="item.isUserTrue === 1 && username!='admin' && username!='ls'  && item.remark ==='2'"
                  type="danger">未读
          </el-tag>


          <el-tag v-if="item.isUserTrue === 0 && item.isAdminTrue === 0 && username !=='admin' && item.remark !=='2'"
                  type="success"
                  style="margin-left: 20px">已读
          </el-tag>
          <el-tag
            v-else-if="item.isUserTrue === 1 && item.isAdminTrue === 0 && (username !=='admin' && username!=='ls') && item.remark !=='2'"
            type="danger"
            style="margin-left: 20px">未读
          </el-tag>
          <p style="color: #ababab;margin: 5px 0">{{
              item.createTime != null && item.createTime.slice(0, 4) + '年' + item.createTime.slice(5, 7) + '月' + item.createTime.slice(8, 10) + '日'
            }}</p>
          <span style="position: absolute;right: 100px;top: 45px">
            <el-tag style="" v-if="item.isAdminTrue === 0 && item.remark!=='2'" type="success">管理员已回复</el-tag> &nbsp;
            <el-tag v-else-if="item.isAdminTrue === 1 && item.remark!='2'" type="danger">管理员未回复</el-tag> &nbsp;
            <!--            <el-button v-else-if="item.remark==='2'" @click="handleClickFine" type="primary"-->
            <!--                       size="medium">去缴费</el-button>-->
              <el-button type="danger" size="mini"
                         v-if="item.isUserTrue === 0  && username!='admin' && username!='ls' && item.remark ==='2' "
                         @click="removeFeedback(item)"
              >
              删除该消息
            </el-button>
          <el-button style="margin-left: 10px"
                     v-if="item.isAdminTrue === 0 && username!=='admin' && username!='ls' && item.isUserTrue === 0 && item.remark!=='2'"
                     @click="removeFeedback(item)" size="small"
                     type="danger">删除此记录
          </el-button>



          </span>
        </div>
      </el-card>
      <div style="display: flex;justify-content: center;margin: 20px 0px">
        <el-pagination
          layout="prev, pager, next,sizes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30]"
          :total="total">
        </el-pagination>
      </div>

      <!--  dialog普通用户查看反馈详情  -->
      <el-dialog
        title="查看反馈详情"
        :visible.sync="dialogVisible"
        :before-close="handleQuestion"
        width="50%"
      >
        <el-descriptions title="反馈标题" :colon="false">
          <el-descriptions-item>
            {{ feedItem.description }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="反馈内容" :colon="false">
          <el-descriptions-item>
            {{ feedItem.content }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="管理员回复内容" :colon="false">
          <el-descriptions-item>
            <el-tag v-if="feedItem.backContent===null">暂无回复</el-tag>
            <span v-else>{{ feedItem.backContent }}</span>
          </el-descriptions-item>
        </el-descriptions>
        <span slot="footer" class="dialog-footer">
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
        <el-button
          v-if="feedItem.isAdminTrue === 0 && feedItem.isUserTrue===1 && ( username!=='admin' && this.username!='ls')"
          type="primary"
          @click="handleQuestion">已 读</el-button>
        <el-button v-else type="primary" @click="handleQuestion">关 闭</el-button>
      </span>
      </el-dialog>

      <!--  管理员查看详情并发送反馈  -->
      <el-dialog
        title="查看反馈详情"
        :visible.sync="manage_dialogVisible"
        :before-close="manage_handleQuestion"
        width="50%"
      >
        <el-descriptions title="反馈标题" :colon="false">
          <el-descriptions-item>
            {{ feedItem.description }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="反馈内容" :colon="false">
          <el-descriptions-item>
            {{ feedItem.content }}
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="管理员回复内容" :colon="false">
          <el-descriptions-item>
            <template v-if="feedItem.backContent===null || feedItem.backContent ===''">
              <el-input :rows="5" type="textarea" v-model="manage_reback"></el-input>
            </template>
            <span v-else>{{ feedItem.backContent }}</span>
          </el-descriptions-item>
        </el-descriptions>
        <span slot="footer" class="dialog-footer">
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
        <el-button v-if="feedItem.backContent === null || feedItem.backContent ===''" type="primary"
                   @click="manageRebackHandle">回 复</el-button>
        <el-button v-else type="primary" @click="manage_dialogVisible = false">关 闭</el-button>
      </span>
      </el-dialog>

      <!--  普通用户查看系统消息详情  -->
      <el-dialog
        title="查看系统消息"
        :visible.sync="system_dialog"
        width="50%"
      >
        <el-descriptions title="即将到期图书" :colon="false">
          <el-descriptions-item>
            {{ '《' + this.dataItem.description + '》' }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="消息内容" :colon="false">
          <el-descriptions-item>
            {{ this.dataItem.content }}
          </el-descriptions-item>
        </el-descriptions>

        <span slot="footer" class="dialog-footer">
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->

        <el-button type="primary" @click="system_doalog_close">关 闭</el-button>
      </span>
      </el-dialog>
    </div>
  </div>

</template>
<script>
import {getFeedbackList, readFeedback, rebackMessage, removeFeedback} from "@/api/system/feedback";

export default {
  name: 'feedback-manage',
  data() {
    return {
      username: this.$store.getters.name,
      dataList: [],
      manage_reback: '',
      // 获取数据表单
      queryForm: {
        pageSize: 10,
        pageNum: 1,
        searchName: '',
        name: '',
        remark: '',

      },
      // 总数
      total: 0,
      dialogVisible: false,
      manage_dialogVisible: false,
      // 反馈消息表单
      readForm: {
        uuid: null,
        type: 1,
        userId: null
      },
      //  反馈记录已读的item
      feedbackItem: {},
      //   记录反馈记录
      feedItem: {},
      //  系统消息dialog显示与否
      system_dialog: false,
      dataItem: {}
    }
  },
  mounted() {
    const el = document.querySelector("#scrollView")
    el.addEventListener('scroll', this.handleScroll)
    this.getList()

  },

  created() {
  },
  methods: {
    // 关闭系统dialog触发
    system_doalog_close() {
      if (this.dataItem.remark === '2' && this.dataItem.isUserTrue === 1 && (this.username !== 'admin' && this.username != 'ls')) {
        console.log("哈啊哈哈哈哈哈")
        // 发起请求，用户系统消息已读
        readFeedback({"uuid": this.dataItem.uuid, "userId": this.dataItem.userId, "type": 1}).then(res => {
          if (res.code === 200) {
            this.feedbackItem = res.data
            this.getList()
            this.$message.success("消息已读")
            this.refresh()
          }
        })
      }


      this.system_dialog = false
    },
    // 显示对话框
    handleClickShowSystemDialog(item) {
      this.system_dialog = true
      this.dataItem = item

    },
    // 点击查看详情对话框的确认触发
    handleQuestion() {
      this.dialogVisible = false
      if (this.username !== "admin") {
        if (this.feedItem.isUserTrue === 1 && this.feedItem.isAdminTrue === 0) {
          this.$message.success("消息已读")
          this.refresh()
          // this.$store.commit("SET_NUM", this.$store.getters.num - 1)
          this.getList()
        }
      }
    },
    handleSizeChange(size) {
      this.queryForm.pageSize = size
      this.getList()
    },
    handleCurrentChange(current) {
      this.queryForm.pageNum = current
      this.getList()

    },
    removeFeedback({uuid}) {
      removeFeedback(uuid).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.getList()
        }
      })
    },

    refresh() {
      this.$bus.$emit('handleEmit')
      // location.reload()
      // this.$router.go(0)
      // setTimeout(() => {
      //   this.$router.go(0)
      // }, 500)
      // this.$router.push("/feedback/feedback-manage")
    },
    manageRebackHandle() {
      // 发起请求，管理员回复
      rebackMessage({
        "uuid": this.feedItem.uuid, "userId": this.feedItem.userId, "backContent": this.manage_reback
      }).then(res => {
        this.getList()
        if (res.code === 200) {
          this.$message.success("回复成功")
          // this.$store.commit("SET_NUM", this.$store.getters.num - 1)
          // console.log(this.$store.getters.num)
          //   重新进入页面
          this.refresh()
        }
        this.manage_dialogVisible = false
      })
    },
    manage_handleQuestion() {
      this.manage_dialogVisible = false
    },
    handleScroll(e) {
      const {scrollTop, clientHeight, scrollHeight} = e.target
      if (scrollTop + clientHeight === scrollHeight) {
        alert('滚动到底部啦')
      }
    },
    // 点击查看反馈信息按钮，调用
    handleContent(item) {
      this.feedItem = item
      if (this.username !== "admin" && this.username != 'ls') {
        // 发起请求，用户已读
        readFeedback({"uuid": item.uuid, "userId": item.userId, "type": 1}).then(res => {
          if (res.code === 200) {
            this.dialogVisible = true
            this.feedbackItem = res.data
          }
        })
      } else {
        this.manage_dialogVisible = true
      }

    },
    getList() {
      getFeedbackList(this.queryForm).then(res => {
        this.dataList = res.rows
        this.total = res.total
      })
    },
    handleClickFine() {
      this.$router.push("/fine/fine-record")
    }
  },
  // 监听屏幕滚动
  watch: {
    'this.$refs.scrollView.clientHeight': {
      immediate: true,
      handler() {
      }
    },
    "queryForm.name": {
      // immediate: true,
      handler() {
        this.getList()
      }
    },
    "queryForm.searchName": {
      // immediate: true,
      handler() {
        this.getList()
      }
    },
    'queryForm.remark': {
      handler(param1, param2) {
        if (param1 != '') {
          this.getList()
        } else {
          this.queryForm.remark = ""
          this.getList()
        }
        console.log(param1 === '')
      }
    },
    //"queryForm.isUserTrue": {
    //  handler(param1, param2) {
    //    console.log(param1 === '')
    //    if (param1 === '') {
    //
    //      this.getList()
    //    } else {
    //      this.queryForm.isUserTrue = param1
    //      this.getList()
    //    }
    //    //this.queryForm.isUserTrue = param1
    //    //this.getList()
    //  }
    //}
  }

};
</script>

<style scoped lang="scss">

</style>
